<!--
 描述: 右下
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">党组织情况统计</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="chart_polo"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "waterPolo",
        data() {
            return {
                baseUrl: domain.testUrl,
                baseName: ':name'
            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {
            getEchart(param) {
                if (param != undefined && param != null) {
                    this.baseUrl = localStorage.getItem('baseUrl');

                    this.baseName = param;
                }

                var url = this.baseUrl + "memberDatav/findOrganizationByNation?name="+ this.baseName;

                var data = [];

                axios.post(url).then((response) => {

                    response.data.forEach((res) => {
                        data.push({
                            value: res.y,
                            name: res.x
                        });
                    })


                    let myChart = echarts.init(document.getElementById('chart_polo'));

                    let option = {
                        color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b} : {c} ({d}%)'
                        },
                        polar: {},
                        angleAxis: {
                            interval: 1,
                            type: 'category',
                            data: [],
                            z: 10,
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#0B4A6B',
                                    width: 5,
                                    type: 'solid'
                                },
                            },
                            axisLabel: {
                                interval: 0,
                                show: true,
                                color: '#0B4A6B',
                                margin: 8,
                                fontSize: 16
                            },
                        },
                        radiusAxis: {
                            min: 40,
                            max: 120,
                            interval: 20,
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#0B3E5E',
                                    width: 1,
                                    type: 'solid'
                                },
                            },
                            axisLabel: {
                                formatter: '{value} %',
                                show: false,
                                padding: [0, 0, 20, 0],
                                color: '#0B3E5E',
                                fontSize: 16
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#0B3E5E',
                                    width: 2,
                                    type: "solid"
                                }
                            }
                        },
                        calculable: true,
                        series: [{
                            type: 'pie',
                            radius: ['6%', '10%'],
                            hoverAnimation: false,
                            labelLine: {
                                normal: {
                                    show: false,
                                    length: 30,
                                    length2: 50
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            tooltip: {
                                show: false
                            },
                            data: [{
                                name: '',
                                value: 0,
                                itemStyle: {
                                    normal: {
                                        color: '#0B4A6B'
                                    }
                                }
                            }]
                        }, {
                            type: 'pie',
                            radius: ['90%', '95%'],
                            hoverAnimation: false,
                            labelLine: {
                                normal: {
                                    show: false,
                                    length: 30,
                                    length2: 50
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            tooltip: {
                                show: false
                            },
                            data: [{
                                name: '',
                                value: 0,
                                itemStyle: {
                                    normal: {
                                        color: '#0B4A6B'
                                    }
                                }
                            }]
                        }, {
                            stack: 'a',
                            type: 'pie',
                            radius: ['20%', '80%'],
                            roseType: 'area',
                            zlevel: 10,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{b}',
                                    textStyle: {
                                        fontSize: 12,
                                    },
                                    position: 'outside'
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true,
                                    length: 0,
                                    length2: 50,
                                    lineStyle: {
                                        type: 'dotted'
                                    }
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: data
                        }]
                    }

                    myChart.setOption(option, true);
                    window.addEventListener('resize', () => {
                        myChart.resize();
                    });
                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });
            }
        },
        beforeDestroy() {

        }
    };
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 1400px;
        top: 730px;
        width: 508px;
        height: 30%;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }
</style>
